<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script src="../public/libs/jquery.min.js"></script>
<script src="../public/plugins/echars/echarts.min.js"></script>
    <script type="text/javascript" >
        $(function () {
            var myChart = echarts.init(document.getElementById('myecharts'));
            option = {
                title: {
                    text: '各部门男女员工统计',
                    subtext: '纯属虚构'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ["男人","女人"]
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: []
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '男员工数量',
                        type: 'bar',
                        data: [],

                    },
                    {
                        name: '女员工数量',
                        type: 'bar',
                        data: [],

                    }
                ]
            };

            $.ajax({
                url:"/sys/barecharts",
                dataType:"json",
                // scriptCharset:"utf-8",
                success:function (r) {
                    //前端的赋值不知道居然是这个样子赋值
                    option.xAxis[0].data=r.deptList;
                    option.series[0].data=r.manList;
                    option.series[1].data=r.womenList;

                    myChart.setOption(option);
                }
            })
        })


    </script>

</head>
<body>

<div style="width: 600px;height: 500px" id="myecharts"></div>

</body>
</html>